<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
		#clock{
			position: relative;
			width: 200px;height: 200px;
			border:1px solid #ccc;
			border-radius: 50%;
			background: -webkit-radial-gradient(circle, #ace, #fce); 
			box-shadow: 1px 1px 4px 1px #333; 

		}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		window.onload = function(){
			var myClock = new Clock();
			myClock.opt = {
				clockId : "clock"
			}
			myClock.init();
			
		}

		function Clock(){
			var self = this;
			this.opt = {};
			this.conf = function(){
				var defaults = {
					// hourPoint : "hourPoint",
					// minPoint : "minPoint",
					// secPoint : "secPoint"
					// clockId : "clock"
				}
				return $.extend(true, defaults,self.opt);	
			}
		}

		Clock.prototype.init = function(){
			var self = this,
				conf = self.conf();

			console.log(conf.clockId);
			this.drawClock(conf.clockId);

			
				
		}

		//画时钟
		Clock.prototype.drawClock = function(id){
			var self = this,
				conf = self.conf();
			var clock = document.getElementById(id);
			self.drawMark(clock);
			var date = new Date();
			var hour = date.getHours();
			var min = date.getMinutes();
			var sec = date.getSeconds();
			var hourPoint = self.drawPoint(clock,50,4,"#111",hour*30+min/2-90);
			var minPoint = self.drawPoint(clock,70,3,"#222",min*6-90);
			var secPoint = self.drawPoint(clock,80,2,"#CB0800",sec*6-90);

			setInterval(function(){
				var date = new Date();
				var hour = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
				setCss3(hourPoint,{"transform":"rotate("+(hour*30+min/2-90)+"deg)"});
				setCss3(minPoint,{"transform":"rotate("+(min*6-90)+"deg)"});
				setCss3(secPoint,{"transform":"rotate("+(sec*6-90)+"deg)"});
			},1000);
			console.log(hour,min,sec);
			// console.log(clock);

		}

		//画刻度
		Clock.prototype.drawMark = function(obj){
			for(var i=0; i<60; i++){
				var width = 2;
				var height = 5;
				if(i%5==0){
					width = 3;
					height = 8;
				}
				var mark = document.createElement("div");
				mark.style.cssText = "width:"+width+"px;height:"+height+"px;background:#111;position:absolute;top:0;left:100px;";
				setCss3(mark,{"transform-origin":"0 100px","transform":"rotate("+i*6+"deg)"})
				obj.appendChild(mark);
			}
		}

		//画指针
		Clock.prototype.drawPoint = function(obj,width,height,color,deg){
			var point = document.createElement("div");
			point.style.cssText = "width:"+width+"px;height:"+height+"px;background:"+color+";position:absolute;left:100px;top:100px;"
			setCss3(point,{"transform-origin":"0 0","transform":"rotate("+deg+"deg)"});
			obj.appendChild(point);
			return point;
		}


		function setCss3 (obj,attrObj) {
		    for (var i in attrObj) {
		     	var newi=i;
			 	if(newi.indexOf("-")>0){
			   	var num=newi.indexOf("-");
			   	newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
			}
			obj.style[newi]=attrObj[i];
			newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
			obj.style["webkit"+newi]=attrObj[i];
			obj.style["moz"+newi]=attrObj[i];
			obj.style["o"+newi]=attrObj[i];
			obj.style["ms"+newi]=attrObj[i];
		}
  }
		</script>
	</head>
	<body>
		<div id="clock"></div>
	</body>
</html>